<template>
    <view class="top">
        <view class="felx-r-one">
            <text class="title">{{data.name}}</text>
            <text class="price">￥{{data.price[0]}}-￥{{data.price[1]}}</text>
        </view>
        <view class="flex-r">
            <text class="dric" v-for="(item ,index) in data.describe" :key="index">{{item}}</text>
        </view>
    </view>
    <view class="form">
        <view class=" flex-r">
            <text class="title">
                真实姓名
            </text>
            <input placeholder-class="placehoder-style" placeholder="请输入真实姓名" v-model="formData.name" />
        </view>
        <view class=" flex-r">
            <text class="title">
                身份证
            </text>
            <input type="number" placeholder-class="placehoder-style" placeholder="请输入身份证号码"
                v-model="formData.id_card" />
        </view>
        <view class=" flex-r">
            <text class="title">
                出生日期
            </text>
            <picker mode="date" @change="selectBorndate">
                <view class="flex-right">
                    <text>{{formData.born_date=='' ? '请选择出生日期' :formData.born_date}}</text>
                    <image class="" src="../../static/other/gengduo.svg">
                    </image>
                </view>
            </picker>
        </view>
        <view class=" flex-r">
            <text class="title">
                性别
            </text>
            <picker mode="selector" :range="gender" @change="selectGender">
                <view class="flex-right">
                    <text>{{formData.gender=='' ? '请选择性别' : formData.gender}}</text>
                    <image class="" src="../../static/other/gengduo.svg">
                    </image>
                </view>
            </picker>
        </view>
        <view class="flex-r">
            <text class="title">
                手机号
            </text>
            <input type="number" placeholder-class="placehoder-style" placeholder="请输入手机号" v-model="formData.phone" />
        </view>
        <!-- 套餐 -->
        <view class="felx-dataPart">
            <view class="M-timepart" v-for="(item,index) in hpvPack" :key="index">
                <view class="label">{{item.title}}</view>
                <view class="timePartsBox">
                    <view @click="selectCombo(nameItem.combo_id,nameItem.combo)" v-for="(nameItem,index) in item.name"
                        :key="index"
                        :class="{timeParts:true,selectStyleclass:nameItem.combo_id==comboStyle ? true : false}">
                        <text>{{nameItem.combo_id}}</text>
                    </view>

                </view>
            </view>
        </view>
        <!-- 时间 -->
        <view class="felx-dataPart">
            <view class="M-timepart" v-for="(item,index) in hpvTime" :key="index">
                <view class="label">{{item.title}}</view>
                <view class="timePartsBox">
                    <view @click="selectTime(time.time_id,time.time)" v-for="(time,index) in item.name" :key="index"
                        :class="{timeParts:true,selectStyleclass:time.time_id == timeStyle ? true : false}">
                        <text>{{time.time}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view style="height:400rpx"></view>
        <view class="bottom">
            <view class="price">合计:<text>￥{{formData.price==''? '0.0' : formData.price}}元</text></view>
            <text @click="submitData" class="btn">提交</text>
        </view>
    </view>
</template>
<script setup lang="ts" >
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref, toRefs, ToRef, toRef, watch } from 'vue';
import { hpv_pack, hpv_time } from '@/public/decl-type'
import Requestapi from '@/public/request'
//控制选中样式
let timeStyle = ref<any>('');
//控制选中样式   
let comboStyle = ref<any>('')
//套餐ID
let comboId = ref<string>('');
//时间
let timeId = ref<string>('')
//提交的表单数据
let formData = reactive({
    name: '',
    id_card: '',
    phone: '',
    gender: '',
    born_date: '',
    combo: '',
    ino_time: '',
    price: '',
    hpv_name: ''
});
//顶部疫苗详情(上个页面传过来的)
let detail = reactive({
    data: {
        _id: '',
        name: '',
        price: ['1'],
        describe: ['1']
    }
})
let { data } = toRefs(detail)
//选择性别
let gender = ref([
    '男', '女'
]);
function selectGender(data: any) {
    formData.gender = gender.value[data.detail.value]
}
//选择出生日期
function selectBorndate(data: any) {
    formData.born_date = data.detail.value
}
//选中套餐
function selectCombo(id: string, combo: string) {
    comboStyle.value = id;
    formData.combo = combo
    comboId.value = id;
}
//选中时间
function selectTime(id: string, time: string) {
    timeStyle.value = id;
    timeId.value = id;
    formData.ino_time = time
}
//价格请求
function getPrice(hpv_id: string, combo_id: string, time_id: string): void {
    let obj = { hpv_id, combo_id, time_id }
    Requestapi.hpv_price(obj).then((res: any) => {
        uni.hideLoading();
        formData.price = res.data.data[0].price
        formData.hpv_name = data.value.name
    }).catch(err => {
        console.log(err);
    })
}
// 监测套餐及时间都选中发请求得到价格
watch([comboId, timeId], (newval, oldVal) => {
    if (newval[0] != '' && newval[1] != '') {
        //发送价格请求
        uni.showLoading({ title: '获取价格', mask: true });
        getPrice(data.value._id, comboId.value, timeId.value);
    }
})
//疫苗套餐及接种时间数据
let hpvPack = ref<hpv_pack[]>([]);
let hpvTime = ref<hpv_time[]>([])
//提交数据
function submitData() {
    uni.showLoading({ title: "提交中", mask: true })
    Requestapi.hpv_res(formData).then(res => {
        uni.hideLoading();
        uni.redirectTo({
            url: "/pages/hpvOrder/index"
        })
    }).catch(err => {
        console.log(err);

    })
}
onLoad((object: any) => {
    data.value = JSON.parse(object.data);
    Requestapi.hpv_pack().then((res: any) => {
        hpvPack.value = [res.data.data[0]]
        hpvTime.value = [res.data.data[1]];
    }).catch(err => {
        console.log(err);
    })
})
</script>
<style>
page {
    background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.form {
    background-color: #ffffff;

    .bottom {
        position: fixed;
        width: 100%;
        bottom: 40rpx;
        left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;

        .btn {
            background-color: #2c76ef;
            color: #ffffff;
            margin-right: 20rpx;
            padding: 15rpx 30rpx;
            border-radius: 5%;
        }

        .price {
            color: #ff5f2c;
            font-size: 25rpx;
            margin-left: 15rpx;
        }
    }
}

.top {
    margin-bottom: 10rpx;
    padding: 20rpx;
    background-color: #ffffff;
    margin-bottom: 15rpx;

    .felx-r-one {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15rpx;

        .title {
            font-size: 35rpx;
        }

        .price {
            color: #ff5f2c;
            font-size: 25rpx;
        }
    }

    .flex-r {
        display: flex;
        align-items: center;

        .dric {
            padding: 8rpx 8rpx;
            margin-right: 6rpx;
            background-color: #f4f6fa;
            font-size: 25rpx;
        }
    }
}
</style>